<template>
  <div class="amap-page-container">
    <el-amap vid="amapDemo" :plugin="plugin" :zoom="zoom" :center="center" class="amap-demo">
      <el-amap-circle-marker v-for="marker in markers" :center="marker.center" :radius="marker.radius" :fill-color="marker.fillColor" :fill-opacity="marker.fillOpacity" :events="marker.events" :key="marker.id"> 
      </el-amap-circle-marker>
    </el-amap>
    <!-- 按钮 -->
    <div class="yj-btn">
      <div class="sbjc-btn"  v-if="equVisibile==true">
                <div class="search">
                  <el-button @click="dialog_5=true" type="primary" icon="el-icon-search">搜索</el-button>
                </div>
                <dl class="ico-list">
                  <dt>设备图例</dt>
                  <dd><button @click="dialog_6=true"><i class="el-icon-location"></i>水质监测</button></dd>
                  <dd><button><i class="el-icon-location"></i>雨量监测</button></dd>
                  <dd><button><i class="el-icon-location"></i>水位流量监测</button></dd>
                  <dd><button @click="dialog_7=true"><i class="el-icon-location"></i>视频</button></dd>
                </dl>
      </div>
    </div>
    <!-- 弹出窗口 -->
    <div class="dialog-wrap">
      <el-dialog title="设备搜索" :visible.sync="dialog_5" width="30%">
        <el-form :model="form" size="mini">
          <el-form-item label="行政区划" :label-width="formLabelWidth">
            <el-select v-model="form.region1" placeholder="请选择">
              <el-option label="上海" value="shanghai"></el-option>
              <el-option label="北京" value="beijing"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="所属河道" :label-width="formLabelWidth">
            <el-select v-model="form.region2" placeholder="请选择">
              <el-option label="上海" value="shanghai"></el-option>
              <el-option label="北京" value="beijing"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="设备类别" :label-width="formLabelWidth">
            <el-select v-model="form.region3" placeholder="请选择">
              <el-option label="上海" value="shanghai"></el-option>
              <el-option label="北京" value="beijing"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="设备状态" :label-width="formLabelWidth">
            <el-select v-model="form.region4" placeholder="请选择">
              <el-option label="上海" value="shanghai"></el-option>
              <el-option label="北京" value="beijing"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="设备名称" :label-width="formLabelWidth">
            <el-select v-model="form.region5" placeholder="请选择">
              <el-option label="上海" value="shanghai"></el-option>
              <el-option label="北京" value="beijing"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="设备编号" :label-width="formLabelWidth">
            <el-select v-model="form.region6" placeholder="请选择">
              <el-option label="上海" value="shanghai"></el-option>
              <el-option label="北京" value="beijing"></el-option>
            </el-select>
            </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog title="水质监测" :visible.sync="dialog_6" width="30%">
        <h4 class="tad-tit">基本信息</h4>
        <table class="moni_table" size="mini">
          <tr>
            <th>设备名称</th>
            <td>{{warnData.time}}</td>
          </tr>
          <tr>
            <th>设备编号</th>
            <td>{{warnData.addr}}</td>
          </tr>
          <tr>
            <th>经度</th>
            <td>{{warnData.jd}}</td>
          </tr>
          <tr>
            <th>纬度</th>
            <td>{{warnData.wd}}</td>
          </tr>
        </table>
        <h4 class="tad-tit">监测信息</h4>
        <table class="moni_table" size="mini">
          <tr>
            <th>水温</th>
            <td>{{warnData.time}}</td>
          </tr>
          <tr>
            <th>PH值</th>
            <td>{{warnData.addr}}</td>
          </tr>
          <tr>
            <th>溶解氧</th>
            <td>{{warnData.jd}}</td>
          </tr>
          <tr>
            <th>高锰酸盐指数</th>
            <td>{{warnData.wd}}</td>
          </tr>
          <tr>
            <th>氨氮</th>
            <td>{{warnData.schd}}</td>
          </tr>
          <tr>
            <th>总磷</th>
            <td>{{warnData.yjnr}}</td>
          </tr>
          <tr>
            <th>总氧</th>
            <td>{{warnData.yjnr}}</td>
          </tr>
          <tr>
            <th>电导率</th>
            <td>{{warnData.yjnr}}</td>
          </tr>
          <tr>
            <th>浊度</th>
            <td>{{warnData.yjnr}}</td>
          </tr>
          <tr>
            <th>总有机碳</th>
            <td>{{warnData.yjnr}}</td>
          </tr>
          <tr>
            <th>密度</th>
            <td>{{warnData.yjnr}}</td>
          </tr>
          <tr>
            <th>叶绿素</th>
            <td>{{warnData.yjnr}}</td>
          </tr>
        </table>
      </el-dialog>
      <el-dialog title="视频" :visible.sync="dialog_7" width="30%">
        <h4 class="tad-tit">基本信息</h4>
        <table class="moni_table" size="mini">
          <tr>
            <th>设备名称</th>
            <td>{{warnData.time}}</td>
          </tr>
          <tr>
            <th>设备编号</th>
            <td>{{warnData.addr}}</td>
          </tr>
          <tr>
            <th>经度</th>
            <td>{{warnData.jd}}</td>
          </tr>
          <tr>
            <th>纬度</th>
            <td>{{warnData.wd}}</td>
          </tr>
        </table>
        <h4 class="tad-tit">基本信息</h4>
        <div>
          <video style="width:100%;height:150px;" src="http://www.w3school.com.cn/i/movie.ogg" controls="controls">
                    your browser does not support the video tag
          </video>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        zoom: 12,
        center: [106.55,29.57],
        plugin: ['ToolBar','Scale',{
            pName: 'MapType',
            defaultType: 1,
            events: {
              init(instance) {
                console.log(instance);
              }
            }
          }],
        markers: [{
          id:1,
          center: [106.55,29.57],
          radius: 20,
          fillOpacity: 1,
          fillColor: 'rgba(0,0,255,1)',
          events: {
            click: () => {
              //alert('click');
              //this.equVisibile=true
            }
          }
        }],      
        // 弹窗信息
        dialog_5:false,
        dialog_6:false,
        dialog_7:false,
        warnData:{
        time:'2018/1/1 12:25:30',
        addr:'（设备或部件名称）',
        jd:'118E',
        wd:'29n',
        schd:'长江上游段',
        yjnr:'(如水质等级低于4级)'
        },
        equVisibile:true,
        form:{
        region1:'',
        region2:'',
        region3:'',
        region4:'',
        region5:'',
        region6:'',
      },
      formLabelWidth:'130px',
      }
    },
    methods:{

    }
  };
</script>
<style>
.amap-page-container {
  height:100%;
}
</style>
